<template>
	<div class="tongzhi">
    <top></top>
    <div style="padding: 20px;">
      <el-button type="danger" @click="logshow">发布通知</el-button>
      <el-table :data="list" style="width: 100%">
        <el-table-column align="center" prop="title" label="标题"></el-table-column>
        <el-table-column align="center" prop="version" label="版本号"></el-table-column>
        <el-table-column align="center" prop="created_at" label="发布时间"></el-table-column>
        <el-table-column align="center" prop="release_name" label="发布人"></el-table-column>
        <el-table-column align="center" prop="ok_count" label="操作">
          <template slot-scope="scope">
            <div class="flexcc">
              <div style="color: rgb(0, 90, 255); cursor: pointer; margin-right: 20px;" @click="xiangqing(scope.row)">详情></div>

              <div style="color: rgb(0, 90, 255); cursor: pointer; margin-right: 20px;" @click="logshow(scope.row)">修改></div>
              <div style="color: #F56C6C; cursor: pointer; margin-right: 20px;" @click="delbtn(scope.row)">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total,jumper" :current-page="search.page"
       @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
    </div>

<!--    <div class="right">
      <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;" class="flexbc">
        <div class="flexcc fanhui" @click="back">
          <div><i class="el-icon-arrow-left" style="margin-right: 5px;"></i></div>
          <div>返回</div>
        </div>
        <top></top>
      </div>
      <div style="padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
        <div style="padding: 0px 0 19px 0; font-size: 18px; font-weight: 700;" class="flex">
          <div><img src="../../../static/img/gongying5.png" style="width: 22px; margin-right: 10px;"></div>
          <div>系统更新通知</div>
        </div>

        <div style="margin-top: 20px;">
          <el-table :data="list" style="width: 100%">
            <el-table-column align="center" prop="id" label="标题"></el-table-column>
            <el-table-column align="center" prop="title" label="版本号"></el-table-column>
            <el-table-column align="center" prop="created_at" label="发布时间"></el-table-column>
            <el-table-column align="center" prop="created_at" label="发布人"></el-table-column>
            <el-table-column align="center" prop="ok_count" label="操作">
              <template slot-scope="scope">
                <div class="flexcc">
                  <div @click="bianji(scope.row)" style="color: rgb(0, 90, 255); cursor: pointer; margin-right: 20px;">详情></div>
                </div>
              </template>
            </el-table-column>
          </el-table>

        </div>

      </div>
    </div> -->
    <el-dialog title="通知详情" :visible.sync="log2" :close-on-click-modal="false" :close-on-press-escape="false" width="800px">
      <div>
        <div style="margin-bottom: 20px;"><span style="font-weight: bold; margin-right: 10px;">通知标题:</span>{{now.title}}</div>
        <div style="margin-bottom: 20px;"><span style="font-weight: bold; margin-right: 10px;">版本号:</span>{{now.version}}</div>
        <div style="margin-bottom: 20px;"><span style="font-weight: bold; margin-right: 10px;">上线时间:</span>{{now.release_at}}</div>
        <div style="margin-bottom: 20px;" v-html="now.content"></div>
        <div style="margin-bottom: 20px;" class="flexc"  v-if="now.annex"><span style="font-weight: bold; margin-right: 10px;">附件:</span>
          <div @click="xiazai(now.annex)" style="color: rgb(0, 90, 255); cursor: pointer; margin-right: 20px;">下载</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log2 = false">关闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title="发布消息" :visible.sync="log" :close-on-click-modal="false" :close-on-press-escape="false" width="800px">
      <div>
        <!-- <div class="flex">
          <div class="f1">通知类型：</div>
          <div class="f2">
            <el-select v-model="tongzhi.type" placeholder="请选择通知类型:">
              <el-option label="重要消息(弹窗)" value="1"></el-option>
              <el-option label="普通消息" value="2"></el-option>
            </el-select>
          </div>
        </div> -->

        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 120px;">通知标题：</div>
          <div class="f2">
            <el-input v-model="tongzhi.title" style="width: 400px;" maxlength="50" placeholder="通知标题"></el-input>
          </div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 120px;">是否弹窗：</div>
          <div class="f2">
            <el-switch v-model="tongzhi.is_eject"  style="width: 46px; height: 21px;" active-color="rgb(0, 90, 255);" inactive-color="rgb(246, 248, 251);" :active-value="1" :inactive-value="0"></el-switch>
          </div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 120px;">上线时间：</div>
          <div class="f2">
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" style="width: 400px;" v-model="tongzhi.release_at" type="datetime"
              placeholder="选择上线时间">
            </el-date-picker>
          </div>
        </div>


        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 120px;">版本号：</div>
          <div class="f2">
            <el-input v-model="tongzhi.version" style="width: 400px;" maxlength="50" placeholder="版本号"></el-input>
          </div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 120px;">通知内容：</div>
          <div style="width: 600px;">
            <fuwenben :content="tongzhi.content" @getcontent="getcontent" v-if="relo"></fuwenben>
          </div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 120px;">附件：</div>
          <div style="width: 600px;" class="flexc">
            <span v-if="tongzhi.annex" style="margin-right: 20px;">已上传文件</span>
            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :http-request="ordergo" :show-file-list="false">
              <div style="line-height: 36px; color: #409EFF;">+上传文件</div>
            </el-upload>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log = false">取 消</el-button>
        <el-button type="primary" @click="xiugai">确 定</el-button>
      </span>
    </el-dialog>
	</div>
</template>

<script>
  import * as qiniu from 'qiniu-js'
  import top from '../top.vue'
  import fuwenben from '@/components/fuwenben.vue'
	export default {
		name: 'tongzhi',
    components:{
      top,fuwenben
    },
		data() {
			return {
        tongzhi:{},
        log2:false,
        now:"",
        relo:false,
        log:false,
        search:{
          page:1,
          page_size:20,
        },
        list:[],
        total:0,
			}
		},
		created() {
      //列表
      this.getlist()

		},
		mounted() {

		},
		methods: {
      xiazai:function(url){
        window.location.href = url  + '?attname='
      },
      getRandomChar:function(len = 11)  {
        var  x = "0123456789qwertyuioplkjhgfdsazxcvbnm" // 需要什么字符这里添加
        var  tmp = ""
        var timestamp = new Date().getTime();
        for(var  i=0;i<len;i++)  {
          tmp += x.charAt(Math.ceil(Math.random()*100000000)%x.length);
        }
        return  timestamp+tmp;
      },
      ordergo: function(file) {
        console.log(file.file)
        var that = this
        let name = this.getRandomChar() + '.' + file.file.name.split('.')[1]
        axios.post(`/api/qiniu/uploadtoken`,{name:name})
          .then(response => {
            if(response.data.msg.code == 0){
              const observer = {
                next(res){
                  console.log(res)
                },
                error(err){
                  console.log(err)
                },
                complete(res){
                  that.tongzhi.annex = 'https://gperson.gantanhaokeji.top/'+ res.key
                }
              }

              const observable = qiniu.upload(file.file, name, response.data.data.token, {}, {})
              const subscription = observable.subscribe(observer) // 上传开始

              // qiniu.compressImage(file.file).then(data => {

              //   const observable = qiniu.upload(data.dist,name,response.data.data.token, {}, {})
              //   const subscription = observable.subscribe(observer) // 上传开始
              // })
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },
      xiangqing:function(item){
        this.now = item
        this.log2 = true
      },
      logshow:function(item){

        if(item){
          this.tongzhi = {
            id:item.id,
            title:item.title,
            content:item.content,
            version:item.version,
            release_at:item.release_at,
            annex:item.annex,
            is_eject:item.is_eject
          }
          console.log(this.tongzhi)
        }else{
          this.tongzhi = {
            id:"",
            title:"",
            content:"",
            version:"",
            annex:"",
            release_at:"",
            is_eject:""
          }
        }
        this.log = true
        this.relo = false
        this.$nextTick(()=>{
          this.relo = true
        })
      },

      getcontent:function(item){
        this.tongzhi.content = item
      },

      xiugai:function(){



        axios.post('/plat/sys/version/update',this.tongzhi).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.$message.success('操作成功');
            this.getlist()
            this.log = false
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      //列表
      getlist:function(){
        axios.get('/plat/sys/version/list').then((response)=>{
        	if (response.data.msg.code == 0) {
            this.list = response.data.data.data

            this.total = response.data.data.total
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      fanye:function(val){
        this.search.page = val
        this.getlist()
      },
      //删除
      delbtn(item){
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/plat/sys/version/del',{
            id:item.id
          }).then((response)=>{
            if (response.data.msg.code == 0) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }
		}
	}
</script>


<style scoped >
 .t_over_text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 40px);
 }
</style>
